<template>
  <div class="page-container">
    <PanelTab @change="handleChange" />
    <div class="page-content">
      <el-row>
        <el-col :span="24">
          <Panel1 :time="time" title="注册量走势图" chartType="bar" tjtype="1" :legend="legend1" />
        </el-col>
        <el-col :span="24">
          <Panel1 :time="time" title="登录量走势图" chartType="bar" tjtype="2" :legend="legend2" />
        </el-col>
        <el-col :span="24">
          <Panel1 :time="time" title="启动量走势图" chartType="bar" tjtype="3" :legend="legend3" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import PanelTab from '@/components/panel/PanelTab.vue'
import PanelChart from '@/components/panel/PanelChart.vue'
import Panel1 from './components/Panel1.vue'

export default {
  name: 'UserNumber',
  components: { PanelTab, PanelChart, Panel1 },
  data() {
    return {
      time: {},
      legend1: [
        { name: 'PC', value: 'pc', type: 'bar' },
        { name: 'APP', value: 'app', type: 'bar' },
        { name: 'M站', value: 'm', type: 'bar' },
        { name: '小程序', value: 'xcx', type: 'bar' },
        { name: '合计', value: 'total', type: 'line' },
      ],
      legend2: [
        { name: 'PC', value: 'pc', type: 'bar' },
        { name: 'APP', value: 'app', type: 'bar' },
        { name: 'M站', value: 'm', type: 'bar' },
        { name: '小程序', value: 'xcx', type: 'bar' },
        { name: '合计', value: 'total', type: 'line' },
      ],
      legend3: [
        { name: 'Android', value: 'app_android', type: 'bar' },
        { name: 'IOS', value: 'app_ios', type: 'bar' },
        { name: '小程序', value: 'xcx', type: 'bar' },
        { name: '合计', value: 'total', type: 'line' },
      ],
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    // 时间变动
    handleChange(time) {
      this.time = time
    },
  },
}
</script>

<style scoped lang="scss">
.page-content {
  padding-top: 62px;
}
</style>
